import { LoginFormPage } from '@ant-design/pro-components'
import { ProFormText } from '@ant-design/pro-form'
import { useCtx } from '@sker/sdk'
import { renderPage, NgerCaptcha } from '@sker/ui'
import { Form } from 'antd'

export const LoginPage: React.FC<{}> = ({ }) => {
    const { login } = useCtx()
    const [form] = Form.useForm()
    return <div style={{
        backgroundColor: 'white',
        height: '100vh',
    }}>
        <LoginFormPage
            title={'欢迎登录'}
            subTitle={'请输入用户名和密码登录'}
            backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
            logo="/logo.png"
            backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
            form={form}
            onFinish={async ({ username, password, captchaKey, captcha }) => {
                await login({
                    username,
                    password,
                    captchaKey,
                    captcha,
                    returnUrl: ''
                })
            }}
        >
            <ProFormText name={'username'} placeholder={'请输入用户名'} />
            <ProFormText.Password name={'password'} placeholder={'请输入密码'} />
            <div className="flex">
                <ProFormText className='flex-1' name={'captcha'} placeholder={'请输入验证码'}></ProFormText>
                <ProFormText hidden name={'captchaKey'}></ProFormText>
                <NgerCaptcha className='w-120px h-32px ml-8px rounded-5px overflow-hidden' onChange={e => {
                    form.setFieldValue('captchaKey', e)
                }} />
            </div>
        </LoginFormPage>
    </div>
}
renderPage(LoginPage, 'imeepos/core/web/login')